<script lang="ts" setup>
import { onMounted } from 'vue';

const props = defineProps({
  context: Object
})

</script>

<template>
  <div>
    <h3 style="color: white; font-size: 1.2em;">临时授权申请</h3>
    <span class="singleline">{{ props.context && props.context.data.description }}</span>   
    <button class="action crop" @click.stop="$emit('crop')">填充</button>
  </div>
</template>

<style lang="less" scoped>
.singleline {
  display: block;
  font-size: 1.1em;
}

.action {
  height: 30px;
  line-height: 15px;
  padding: 5px 10px;
  margin-top: 5px;
  margin-right: 5px;
  border-radius: 5px;
  cursor: pointer;
  border: 0px;
  float: right;
  font-size: 1.1em;
}
.action.crop {
  color: white;
  background: #289eff;

  &:hover {
    animation: primaryBtn .3s;
    animation-timing-function: ease-in;
    animation-direction: normal;
    transition: all 0.3s;
    animation-fill-mode: forwards;
  }
}

@keyframes primaryBtn {
  from {
    background: #289eff;
    color: white;
  }

  to {
    background: white;
    color: #289eff;
  }
}
</style>